<template>
  <!--
    在main.js当中进行了全局注册百度Map组件，在这里直接进行使用，该组件未设置宽高，需自己设置

    没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
    当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。

    由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。
    因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，
    不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

    属性值说明：
        - ready 
        - center 定位, 可使用如“长沙市岳麓区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
        - zoom 缩放等级 (当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。使用经纬度是一定需要设置zoom)
        - min-zoom max-zoom 最大、最小缩放级别
        - map-click 是否允许点击 默认为true
        - dragging 是否允许拖拽 默认为true
        - scroll-wheel-zoom 是否允许鼠标滚轮缩放 默认为false
        - double-click-zoom 是否允许双击缩放 默认为true
    -->
  <baidu-map
    class="map"
    @ready="ready"
    @click="click"
    :center="center"
    :zoom="zoom"
    :min-zoom="10"
    :max-zoom="12"
    :map-click="false"
    :dragging="false"
    :scroll-wheel-zoom="true"
    :double-click-zoom="false"
  >
    <!--
        比例尺
        - anchor 比例尺定位
            - BMAP_ANCHOR_TOP_LEFT	控件将定位到地图的左上角
            - BMAP_ANCHOR_TOP_RIGHT	控件将定位到地图的右上角
            - BMAP_ANCHOR_BOTTOM_LEFT	控件将定位到地图的左下角
            - BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角

        - offset 偏移
    -->
    <bm-scale
      anchor="BMAP_ANCHOR_TOP_LEFT"
      :offset="{
        width: 10,
        height: 10,
      }"
    ></bm-scale>
    <!-- 
        缩放控件
        - enableGeolocation     控件是否集成定位功能 默认false
        - showZoomInfo          是否显示级别提示信息
        - NavigationControlType 平移缩放控件的类型
            - BMAP_NAVIGATION_CONTROL_LARGE	标准的平移缩放控件（包括平移、缩放按钮和滑块）
            - BMAP_NAVIGATION_CONTROL_SMALL	仅包含平移和缩放按钮
            - BMAP_NAVIGATION_CONTROL_PAN	仅包含平移按钮
            - BMAP_NAVIGATION_CONTROL_ZOOM	仅包含缩放按钮
    -->
    <bm-navigation
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :enableGeolocation="true"
      :showZoomInfo="true"
      NavigationControlType="BMAP_NAVIGATION_CONTROL_PAN"
    ></bm-navigation>
    <!--
        缩略图
            - anchor	控件停靠位置
            - offset    控件偏移值
            - size      缩略地图控件的大小
            - isOpen    缩略地图添加到地图后的开合状态 默认为false
    -->
    <bm-overview-map
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :isOpen="true"
    ></bm-overview-map>

    <!--
        定位
            anchor              控件停靠位置
            offset              控件偏移值
            showAddressBar      是否显示定位信息面板。默认显示定位信息面板
            autoLocation        添加控件时是否进行定位。根据 W3C相关标准 描述，为保证用户隐私安全，geoLocation API 必须使用 SSL 连接，并获得用户的手动许可。请确保使用该属性时满足上述条件。
            locationIcon        可自定义定位中心点的Icon样式
    -->
    <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :offset="{
        width: 150,
        height: 10,
      }"
      :showAddressBar="true"
      :autoLocation="true"
    ></bm-geolocation>

    <!-- 版权控件 -->
    <bm-copyright
      anchor="BMAP_ANCHOR_BOTTOM_LEFT"
      :offset="{
        width: 10,
        height: 50,
      }"
      :copyright="[
        {
          id: 1,
          content: 'Copyright Message',
          bounds: { ne: { lng: 110, lat: 40 }, sw: { lng: 0, lat: 0 } },
        },
        { id: 2, content: '<a>this is about lzq baidu-map-project</a>' },
      ]"
    >
    </bm-copyright>

    <!--城市列表控件 -->
    <bm-city-list
      anchor="BMAP_ANCHOR_TOP_LEFT"
      :offset="{
        width: 10,
        height: 50,
      }"
    ></bm-city-list>

    <!-- 全景控件 -->
    <bm-panorama
      anchor="BMAP_ANCHOR_TOP_LEFT"
      :offset="{
        width: 140,
        height: 10,
      }"
    ></bm-panorama>

    <!-- 自定义组件 -->
    <bm-control  anchor="BMAP_ANCHOR_TOP_LEFT"
      :offset="{
        width: 200,
        height: 10,
      }">
      <el-button @click="addZoom(19)">缩放至最大</el-button>
      <el-button @click="addZoom(10)">还原</el-button>
      <el-button @click="addZoom(3)">缩放至最小</el-button>
    </bm-control>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      address: null,
      center: { lng: 116.404, lat: 39.915 },
      zoom: 11,
    };
  },
  methods: {
    /**
     * 初始化地图调用方法
     */
    ready({ BMap, map }) {
      console.log("ready init");
      console.log("ready BMap => ", BMap);
      console.log("ready map => ", map);
    },
    /**
     * 单击地图事件-直接对所有的参数进行解析
     * type 事件类型 onclick
     * target map对象
     * point 点的经纬度数据
     * pixel x、y坐标
     * overlay
     */
    click({ overlay, point }) {
      console.log("click this map overlay = " + overlay);
      console.log("click this map and this point a and y =", point);
    },
    addZoom(level) {
      this.zoom = level;
    },
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
